<template>
  <div class="management">
    <div class="title">
      <h3>个人价格</h3>
    </div>
    <p class="title_jiage">
      <span>价格:</span>2000元，外地加1000元
    </p>
    <div class="title">
      <h3>管理费</h3>
    </div>
    <div class="table_text">
      <p>
        <span>管理费缴纳说明：</span>
      </p>
      <p>1. 每月1号 -- 10号为管理费缴纳期间；</p>
      <p>2. 管理费滞纳金额度：若11号--20号之间缴纳为1级延迟，费用上浮20%，20号-31号之间缴纳为二级延迟，费用上浮50%；</p>
      <p>3. 若当月未交管理费，则次月起不可接单、前台不可被查询到；</p>
      <!-- 表格 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="月份"></el-table-column>
          <el-table-column prop="guanlifei" label="管理费"></el-table-column>
          <el-table-column prop="address" label="罚金"></el-table-column>
          <el-table-column prop="yingjiao" label="应交额度"></el-table-column>
          <el-table-column prop="jiaona" label="缴纳状态"></el-table-column>
          <el-table-column prop="jiaonajs" label="缴纳时间"></el-table-column>
          <!-- 如果已缴纳按钮为黑色否则为红色 -->
          <el-table-column prop="zuocao" label="操作"></el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination layout="prev, pager, next" :total="yeshu"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Management",
  
  data() {
    return {
      yeshu:50,
      tableData: [
        {
          date: "2016年5月",
          guanlifei: "500",
          address: "0",
          yingjiao: "500",
          jiaona: "已缴纳，一级延迟",
          jiaonajs: "2017/10/1 13:34",
          zuocao: "已缴纳"
        }
      ]
    };
  },
  mounted() {
    // 加载表格
    //并且连接分页
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.management {
  width: 80%;
}
.title {
  width: 90%;
  background-color: #cccccc;
  font-size: 18px;
  font-weight: 600;
  margin: auto;
  margin-top: 20px;
  h3 {
    margin-left: 15px;
  }
}
.title_jiage {
  padding-left: 100px;
  margin-top: 20px;

  span {
    font-weight: 600;
  }
}
.table_text {
  width: 90%;
  margin: auto;
  margin-bottom: 200px;
  margin-top: 5px;
  p {
    font-size: 12px;
    color: #000000;
    span {
      color: #cc0000;
      font-weight: 600;
    }
  }
}
.block{
  margin-bottom: 20px;
  text-align: center;
}
</style>